<template>
	<view>
		<view class="lc-detail-box">
			<view class="lc-head">
				<view class="lc-title">{{detail.info.title}}</view>
				<view class="lc-money">{{detail.info.price_text}}</view>
			</view>
			<view class="lc-address">
				<image src="/static/address.png" mode="widthFix"></image>
				<view>{{detail.info.city}}</view>
			</view>
			<view class="lc-time">发布时间：{{detail.info.createtime}}</view>
		</view>
		<view class="lc-detail-box">
			<view class="lc-name">薪资详情</view>
			<view class="lc-line">薪资范围：{{detail.info.price_text}}/月</view>
			<view class="lc-line">发薪日期：{{detail.info.price_day}}</view>
			<view class="lc-line">奖金补贴：{{detail.info.price_add}}</view>
		</view>
		<view class="lc-detail-box">
			<view class="lc-name">工作地址</view>
			<view class="lc-line">{{detail.info.ress_detail}}</view>
		</view>
		<view class="lc-detail-box">
			<view class="lc-name">职位详情</view>
			<view class="lc-line">{{detail.info.introduction}}</view>
		</view>
		<view class="lc-gs">
			<view class="lc-gs-box">
				<image :src="baseurl+detail.shop_info.avatar" mode="aspectFill"></image>
				<view>{{detail.shop_info.shopname}}</view>
			</view>
			<view class="lc-gs-detail">
				<text v-if="detail.shop_info.bio">{{detail.shop_info.bio}}</text>
			</view>
		</view>
		<view class="lc-big"></view>
		<view class="lc-foot">
			<view class="lc-edit" @click="editJob">编辑</view>
			<view class="lc-add" v-if="detail.info.work_status==1" @click="switchJob">关闭职位</view>
			<view class="lc-add" v-if="detail.info.work_status==2" @click="switchJob">开放职位</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				app: getApp().globalData,
				baseurl: getApp().globalData.baseurl,
				detail: {},
				id: ''
			}
		},
		onLoad(e) {
			this.id = e.id
			this.app.post('/api/wanlshop/user/workdetail', {
				id: e.id
			}).then(res => {
				console.log(res)
				this.detail = res
			})
		},
		methods: {
			editJob() {
				uni.navigateTo({
					url: '/pages/lc/editJob/editJob?id=' + this.id
				})
			},
			switchJob() {
				this.app.post('/api/wanlshop/user/openworkshop', {
					id: this.id
				}).then(res => {
					console.log(res)
					if (this.detail.info.work_status == 1) {
						this.detail.info.work_status = 2
						uni.showToast({
							title: '已关闭',
							icon: "none"
						})
					} else {
						this.detail.info.work_status = 1
						uni.showToast({
							title: '已开放',
							icon: "none"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.lc-detail-box {
		width: 690rpx;
		padding: 50rpx 0;
		margin-left: 30rpx;
		border-bottom: 1px solid #eee;

		.lc-head {
			width: 690rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.lc-title {
				font-size: 40rpx;
				color: #333333;
			}

			.lc-money {
				font-size: 40rpx;
				color: #84BD00;
				font-weight: bold;
			}
		}

		.lc-name {
			font-size: 33rpx;
			color: #3D3D3D;
			padding-bottom: 10rpx;
		}

		.lc-line {
			font-size: 30rpx;
			color: #666666;
			margin-top: 20rpx;
		}

		.lc-address {
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			margin-bottom: 30rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}

			view {
				font-size: 30rpx;
				color: #666666;
				margin-left: 12rpx;
			}
		}

		.lc-time {
			font-size: 30rpx;
			color: #999999;
		}
	}

	.lc-gs {
		width: 690rpx;
		padding: 50rpx 0;
		margin-left: 30rpx;

		.lc-gs-box {
			width: 690rpx;
			display: flex;
			align-items: center;

			image {
				width: 100rpx;
				height: 100rpx;
			}

			view {
				font-size: 33rpx;
				color: #3D3D3D;
				margin-left: 28rpx;
			}
		}

		.lc-gs-detail {
			width: 690rpx;
			font-size: 30rpx;
			margin-top: 40rpx;
			color: #666666;
		}
	}

	.lc-foot {
		width: 750rpx;
		height: 120rpx;
		background-color: #FFFFFF;
		box-shadow: 0px 8rpx 24rpx 0px rgba(0, 0, 0, 0.2);
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;

		.lc-edit {
			width: 300rpx;
			height: 82rpx;
			background: rgba(132, 189, 0, 0.1);
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50rpx;
			color: #84BD00;
			font-size: 33rpx;
			margin-left: 30rpx;
		}

		.lc-add {
			width: 330rpx;
			height: 82rpx;
			background: #84BD00;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50rpx;
			color: #FFFFFF;
			font-size: 33rpx;
			margin-right: 30rpx;
		}
	}
</style>